<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center courseDetails_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub courseDetails_fd0_0'>
				<view class='flex flex-wrap align-center justify-center courseDetails_fd0_0_c0'
					@tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  courseDetails_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='courseDetails_fd0_0_c1_c0'>{{couserInfo.course_name}}</text>
				</view>
				<view class='flex flex-wrap align-center courseDetails_fd0_0_c0'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#cd962d"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-center benben-flex-layout">
				<view class="courseDetails_fd1_0">
					<image class='courseDetails_fd1_0_c1_c0' mode="aspectFill" :src='couserInfo.thumb'></image>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center">
				<view>
					<benben-flex-tabs class-name='courseDetails_benbenTabsfd2_0' v-model="taps" ref="benben_tabsfd2_0"
						select-mark="benben_tabsfd2_0" key="benben_tabsfd2_0" :open-title-type='false'
						:open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false'
						:tabs-info.sync="tabsInfofd2_0">

						<scroll-view @scroll="tabsInfofd2_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd2_0"
							class="benben-tabs" style="width:750rpx" :scroll-x="true"
							:scroll-left.sync="tabsInfofd2_0.moveX" scroll-with-animation="all .3s ease">
							<view class="benben-tabs-content" id="benben_tabsfd2_0-content">
								<view id="benben_tabsfd2_0-title"
									class="benben-tabs-title flex flex align-center justify-around">
									<view
										:class="{ 'checkTitlefd2_0': taps == '1', 'flex flex-wrap align-center': true }"
										@tap="taps = '1'" :id="`benben_tabsfd2_0-title-item-${'1'}`">

										<text>章节</text>

									</view>
									<view
										:class="{ 'checkTitlefd2_0': taps == '2', 'flex flex-wrap align-center': true }"
										@tap="taps = '2'" :id="`benben_tabsfd2_0-title-item-${'2'}`">

										<text>题库</text>

									</view>
								</view>
								<view :style="{ left: tabsInfofd2_0.lineleft, maxWidth: tabsInfofd2_0.lineWidth }"
									id="benben_tabsfd2_0-line"
									class="benben-tabs-line flex benben-flex-tabs-line courseDetails_linefd2_0"></view>
							</view>
						</scroll-view>

					</benben-flex-tabs>

				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---章节flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if="taps=='1'">
				<view class='flex flex-direction flex-wrap align-stretch courseDetails_fd3_0' v-for="(v, k) in list"
					:key="k">
					<view class='flex flex-wrap align-center justify-between courseDetails_fd3_0_c0'
						@tap.stop="changeChapter(k)">
						<view class='flex flex-wrap align-center'>
							<!-- <text class='courseDetails_fd3_0_c0_c0_c0'>章节一 </text> -->
							<text class='courseDetails_fd3_0_c0_c0_c1'>{{v.chapter_name}}</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<u-icon v-if="!v.isSelect" name="arrow-down" color="#999"></u-icon>
							<u-icon v-if="v.isSelect" name="arrow-up" color="#999"></u-icon>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch courseDetails_fd3_0_c1' v-if="v.isSelect">
						<block v-if="v.child.length > 0">
							<view class='flex flex-direction flex-wrap align-stretch courseDetails_fd3_0_c1_c0'
								v-for="(v1, k1) in v.child" :key="k1">
								<view class='flex flex-wrap align-center justify-between'>
									<view class='flex flex-wrap align-center'>
										<image class='courseDetails_fd3_0_c1_c0_c0_c0_c0' mode="aspectFit"
											:src='STATIC_URL+"32.png"' v-if="v1.file_type == 'mp4'"></image>
										<image class='courseDetails_fd3_0_c1_c0_c0_c0_c0' mode="aspectFit"
											:src='STATIC_URL+"33.png"' v-if="v1.file_type == 'pdf'"></image>
										<image class='courseDetails_fd3_0_c1_c0_c0_c0_c0' mode="aspectFit"
											:src='STATIC_URL+"96.png"' v-if="v1.file_type == 'ppt' || v1.file_type == 'pptx'"></image>
										<image class='courseDetails_fd3_0_c1_c0_c0_c0_c0' mode="aspectFit"
											:src='STATIC_URL+"97.png"' v-if="v1.file_type == 'doc' || v1.file_type == 'docx'"></image>
										<text class='courseDetails_fd3_0_c1_c0_c0_c0_c1'>{{v1.mean_name}}</text>
									</view>
									<block v-if="v1.file_type == 'mp4'">
										<view class='flex flex-wrap align-center' @tap.stop="seeVideo(v1.aid)">
											<button class='courseDetails_fd3_0_c1_c0_c0_c1_c0'
												v-if="v1.is_finish == 0">观看</button>
											<button class='courseDetails_fd3_0_c1_c0_c0_c1_c0'
												v-if="v1.is_finish == 1">继续观看</button>
											<button class='courseDetails_fd3_0_c1_c0_c0_c1_c0'
												v-if="v1.is_finish == 2">回放</button>
										</view>
									</block>
									<block v-else>
										<view class='flex flex-wrap align-center' @tap.stop="seePdf(v1.file, v1.aid)">
											<button class='courseDetails_fd3_0_c1_c0_c0_c1_c0'>查看</button>
										</view>
									</block>
								</view>
								<view class='flex flex-wrap align-center courseDetails_fd3_0_c1_c0_c1'
									v-if="(couserInfo.is_study != 0) && v1.file_type == 'mp4'">
									<text class='courseDetails_fd3_0_c1_c0_c1_c0'>学习进度</text>
									<view class='flex benben-progress-bar courseDetails_fd3_0_c1_c0_c1_c1'>
										<view
											class='benben-progress-bar-center courseDetails_progress1_fd3_0_c1_c0_c1_c1' :style="{width: v1.period+'%'}"></view>
									</view>
									<text class='study_fd2_0_c1_c2_c2'>{{v1.period}}%</text>
								</view>
							</view>
						</block>

						<!-- <view class='flex flex-direction flex-wrap align-stretch courseDetails_fd3_0_c1_c0'>
							<view class='flex flex-wrap align-center justify-between'>
								<view class='flex flex-wrap align-center'>
									<image class='courseDetails_fd3_0_c1_c0_c0_c0_c0' mode="aspectFit"
										:src='STATIC_URL+"33.png"'></image>
									<text class='courseDetails_fd3_0_c1_c0_c0_c0_c1'>课件名称.pdf</text>
								</view>
								<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
									:data-url="`/pages/course/courseware/courseware?aid=1`">
									<button class='courseDetails_fd3_0_c1_c0_c0_c1_c0'>查看</button>
								</view>
							</view>
							<view class='flex flex-wrap align-center courseDetails_fd3_0_c1_c0_c1'>
								<text class='courseDetails_fd3_0_c1_c0_c1_c0'>学习进度</text>
								<view class='flex benben-progress-bar courseDetails_fd3_0_c1_c0_c1_c1'>
									<view class='benben-progress-bar-center courseDetails_progress1_fd3_0_c1_c0_c1_c1'
										:style="{width: 50+'%'}"></view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<u-loadmore v-if="last_page > 1" class="loadmore" font-size="24" :status="status" :icon-type="iconType" :load-text="loadText" />
				<view class="noData_other" v-if="list.length == 0 && !isShow">
					<image src="/static/empty/no.png"></image>
					<view>没有章节~</view>
				</view>
			</view>

			<!---章节flex布局结束-->
			<!---题库flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout courseDetails_flex_4"
				v-if="taps=='2'">
				<view class='flex flex-wrap align-center courseDetails_fd4_0'>
					<text class='courseDetails_fd4_0_c0'>题目类型：</text>
					<text class='courseDetails_fd4_0_c0'>单选、多选、判断。</text>
				</view>
				<view class='flex flex-wrap align-center courseDetails_fd4_1'>
					<text>单选题：</text>
					<text>{{questionInfo.danxuan}}</text>
					<text>题。</text>
				</view>
				<view class='flex flex-wrap align-center courseDetails_fd4_1'>
					<text>多选题：</text>
					<text>{{questionInfo.duoxuan}}</text>
					<text>题。</text>
				</view>
				<view class='flex flex-wrap align-center courseDetails_fd4_1'>
					<text>判断题：</text>
					<text>{{questionInfo.panduan}}</text>
					<text>题。</text>
				</view>
			</view>
		</block>



		<!---题库flex布局结束-->
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex courseDetails_flex_5"
			v-if="taps=='2'">
			<button class='courseDetails_fd5_0' @tap.stop="startQuestion">开始做题</button>
		</view>
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex courseDetails_flex_5" v-if="taps=='1' && couserInfo.is_study == 0">
			<button class='courseDetails_fd5_0' @tap.stpop="addCourse">添加课程</button>
		</view>
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex courseDetails_flex_5" v-if="taps=='1' && couserInfo.is_study == 1 && couserInfo.study == 0">
			<button class='courseDetails_fd5_0' @tap.stpop="removeCourse">取消课程</button>
		</view>
		<view :style="{height: '120rpx'}"></view>

		<!-- <mumu-previewOffce :fileUrl='fileUrl' v-model='showPreview'></mumu-previewOffce> -->
		<!-- <mumu-h5office v-model="showPreview" :file="fileUrl" appid="__UNI__D301867"></mumu-h5office> -->
	</view>
</template>
<script>
	import MumuPreviewOffce from '@/uni_modules/mumu-previewOffce/components/mumu-previewOffce/mumu-previewOffce.vue'
	// import mumuH5office from "@/uni_modules/mumu-h5office/components/mumu-h5office/mumu-h5office.vue"
	export default {
		components: {
			MumuPreviewOffce
			// mumuH5office 
		},


		data() {
			return {
				"tabsInfofd2_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0
				},
				"bannerIndexfd1_0": 0,
				"taps": 1,
				"aid": "",
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"isShow": true,
				"couserInfo": {},
				"questionInfo": {},
				showPreview: false,
				fileUrl: '',
				means_id: "",  // 资料id
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				aid
			} = options
			if (aid !== undefined) this.aid = aid;
			this.courseCatalog();
			this.getCourseQuestion();
			uni.$on('updataVideo', res => {
				this.courseCatalog();
			})
		},
		onUnload() {
			uni.$off('updataVideo');
		},
		onReady() {

		},
		onShow() {
			this.fileUrl = "";
			this.showPreview = false;
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			// this.page = 1;
			// this.is_pull = true;
			// this.isShow = true;
			// this.courseCatalog();
		},
		// 上拉加载
		onReachBottom() {
			if (this.page >= this.last_page) return;
			this.status = 'loading';
			this.page++;
			setTimeout(() => {

				if (this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.is_pull = false;
				this.courseCatalog();
			}, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			// 获取课程目录  post647ed860f3e45
			courseCatalog() {
				this.$api.post(global.apiUrls.post647ed860f3e45, {
					course_id: this.aid,
					page: this.page
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						this.couserInfo = res.data.data.couser;
						if (res.data.data.list.data.length > 0) {
							res.data.data.list.data.forEach((v, k) => {
								v.isSelect = false;
							})
						}
						if (this.is_pull) {
							this.list = res.data.data.list.data;
						} else {
							this.list = this.list.concat(res.data.data.list.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			changeChapter(k) {
				this.list[k].isSelect = !this.list[k].isSelect;
				this.$forceUpdate();
			},
			// 获取课程题库信息  post648a67f883bb7
			getCourseQuestion() {
				this.$api.post(global.apiUrls.post648a67f883bb7, {
					course_id: this.aid
				}).then(res => {
					if (res.data.code == 1) {
						this.questionInfo = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 添加课程  post6481b1f1a9d27
			addCourse() {
				this.$api.post(global.apiUrls.post6481b1f1a9d27, {
					course_id: this.aid
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.page = 1;
						this.courseCatalog();
					}
				})
			},
			// 取消课程
			removeCourse() {
				this.$api.post(global.apiUrls.post64d5e4added2a, {
					aid: this.aid
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.page = 1;
						this.courseCatalog();
					}
				})
			},
			startQuestion() {
				if (this.questionInfo.danxuan == 0 && this.questionInfo.duoxuan == 0 && this.questionInfo.panduan == 0) {
					this.$message.info('暂无题目');
					return;
				}
				uni.navigateTo({
					url: '/pages/course/doTheQuestion/doTheQuestion?type=2' + '&aid=' + this.aid
				})
			},
			seeVideo(aid) {
				if (this.couserInfo.is_study == 0) {
					this.$message.info('请先添加课程进行学习');
					return;
				}
				uni.navigateTo({
					url: '/pages/course/videoOpen/videoOpen?aid=' + aid
				})
			},
			
			
			// 打开学习资料
			seePdf(file, aid) {
				if (this.couserInfo.is_study == 0) {
					this.$message.info('请先添加课程进行学习');
					return;
				}
				if (file.length == 0) {
					this.$message.info('未添加课程附件');
					return;
				}
				
				let _this = this;
				_this.means_id = aid;
				let id = aid;
				let url = file[0].path;
				// #ifdef APP-PLUS
								
				let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
				if (files[id]) {
					// 已下载的文件直接打开
					_this.savePdf();
					plus.runtime.openFile(files[id], {}, (res) => {
						console.log(res);
						// downloadFile()
					})
				} else {
					downloadFile()
				}
								
				function downloadFile() {
					uni.showLoading({
						title: '加载中'
					})
					const dtask = plus.downloader.createDownload(url, {}, function(d, status) {
						if (status == 200) {
							console.log('保存成功')
							uni.hideLoading();
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							//const fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							files[id] = d.filename
							uni.setStorageSync('files', JSON.stringify(files))
							_this.savePdf();
							plus.runtime.openFile(d.filename) //选择软件打开文件
						} else {
							//下载失败
							plus.downloader.clear() //清除下载任务
							uni.hideLoading();
							uni.showToast({
								title: '文档加载失败，请稍后再试',
								icon: 'none',
							})
						}
					})
					dtask.start()
				}
				// #endif
								
				// #ifdef H5
				window.open(url)
				// #endif

				
				// this.fileUrl = file[0].path;
				// this.showPreview = true;
				// let _this = this;
				// _this.means_id = aid;
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				
				// uni.downloadFile({
				// 	url: file[0].path,
				// 	success: function(res) {
				// 		var filePath = res.tempFilePath;
				// 		uni.hideLoading();
				// 		uni.openDocument({
				// 			filePath: filePath,
				// 			showMenu: true,
				// 			success: function(res) {
				// 				console.log('打开文档成功');	
				// 				_this.savePdf();
				// 			}
				// 		});
				// 	},
				// 	fail: function(err) {
				// 		uni.hideLoading();
				// 		uni.showToast({
				// 			title: '文档加载失败，请重试',
				// 			icon: 'none'
				// 		})
				// 	}
				// });
			},
			// 添加文件预览记录 post64ba56f48595b
			savePdf() {
				this.$api.post(global.apiUrls.post64ba56f48595b, {
					means_id: this.means_id
				}).then(res => {
					console.log(res);
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.study_fd2_0_c1_c2_c2 {
		color: #999999;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		margin: 0rpx 0rpx 0rpx 12rpx;
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
	}

	.courseDetails_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.courseDetails_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 88rpx;
	}

	.courseDetails_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.courseDetails_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.courseDetails_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.courseDetails_numberfd1_0_c0 {
		background: #525050;
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		width: 80rpx;
		height: 40rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		font-weight: 400;
	}

	.courseDetails_fd1_0_c1_c0 {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.courseDetails_fd1_0 {
		width: 702rpx;
		height: 343rpx;
	}

	.courseDetails_swiperDotUnselectedfd1_0 {
		border: 1px solid rgba(0, 0, 0, 0.3);
		background: rgba(0, 0, 0, 0.3);
		width: 16rpx;
		height: 16rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.courseDetails_swiperDotSelectedfd1_0 {
		border: 1px solid #00A7FF;
		background: #00A7FF;
		width: 16rpx;
		height: 16rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
	}

	::v-deep .courseDetails_swiperDotfd1_0 {
		position: absolute;
		bottom: 20rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.courseDetails_linefd2_0 {
		background: rgba(42, 139, 238, 0.39);
		width: 40rpx;
		height: 6rpx;
		top: 75rpx;
		background-size: 100% auto !important;
		box-shadow: 0rpx -1rpx 6rpx rgba(29, 137, 235, 0.16);
	}

	.checkTitlefd2_0 {
		font-weight: 700 !important;
		font-size: 36rpx !important;
		color: rgba(51, 51, 51, 1) !important;
		background-color: rgba(255, 255, 255, 1) !important;
	}

	::v-deep .courseDetails_benbenTabsfd2_0 {
		background: #fff;
		width: 750rpx;
		height: 90rpx;
		white-space: nowrap;
		text-align: center;
		color: rgba(102, 102, 102, 1);
	}

	.courseDetails_progress1_fd3_0_c1_c0_c1_c1 {
		background: rgba(42, 139, 238, 1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.courseDetails_fd3_0_c1_c0_c1_c1 {
		background: rgba(246, 247, 249, 1);
		width: 356rpx;
		height: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.courseDetails_fd3_0_c1_c0_c1_c0 {
		color: #ACB3B9;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.courseDetails_fd3_0_c1_c0_c1 {
		margin: 22rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_fd3_0_c1_c0_c0_c1_c0 {
		background: linear-gradient(259deg, #CD962D 0%, #FCD48B 100%);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 24rpx;
		color: #fff;
		width: 110rpx;
		height: 48rpx;
		line-height: 50rpx;
	}

	.courseDetails_fd3_0_c1_c0_c0_c0_c1 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.courseDetails_fd3_0_c1_c0_c0_c0_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_fd3_0_c1_c0 {
		border-bottom: 1px solid #eee;
		padding: 36rpx 0rpx 38rpx 0rpx;
	}

	.courseDetails_fd3_0_c1 {
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.courseDetails_fd3_0_c0_c1_c0 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_fd3_0_c0_c0_c1 {
		margin: 0rpx 0rpx 0rpx 15rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
	}

	.courseDetails_fd3_0_c0_c0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
	}

	.courseDetails_fd3_0_c0 {
		background: rgba(246, 247, 249, 0.39);
		width: 750rpx;
		height: 72rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.courseDetails_fd3_0 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_flex_4 {
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 30rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_fd4_1 {
		margin: 16rpx 0rpx 16rpx 0rpx;
	}

	.courseDetails_fd4_0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
	}

	.courseDetails_fd4_0 {
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.courseDetails_flex_5 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(28rpx + var(--window-bottom));
	}

	.courseDetails_fd5_0 {
		background: rgba(205, 150, 45, 1);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>